<template>
  <div class="AddExaminationItem">
    <div class="title">
      <div>
        <p>考试信息</p>
      </div>
    </div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <div class="formBox">
        <div class="formTop">
          <el-form-item label="考试名称" prop="examPaper">
            <el-input
              placeholder="请选择考试名称"
              style="width: 217px"
              v-model="ruleForm.examPaper"
            ></el-input>
          </el-form-item>
          <el-form-item label="考场">
            <el-select
              multiple
              v-model="examinationRoom"
              placeholder="请选择考场"
              @change="changeRoom"
            >
              <el-option
                v-for="(item, index) in roomList"
                :key="index"
                :label="item.roomName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="考试日期">
            <el-date-picker
              v-model="ruleForm.examinationDate"
              type="date"
              placeholder="选择日期"
              @change="change1"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="考点：" prop="locName">
            <el-input
              style="width: 217px"
              v-model="ruleForm.locName"
            ></el-input>
          </el-form-item>
        </div>
        <div class="formBottom">
          <el-form-item label="考试时间" prop="examTime">
            <el-time-picker
              is-range
              arrow-control
              value-format="HH:mm:ss"
              v-model="examTime1"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
              @change="change"
            >
            </el-time-picker>
          </el-form-item>
          <el-form-item label="考试类型" prop="examType">
            <el-select v-model="ruleForm.examType" placeholder="请选择考试类型">
              <el-option
                v-for="(item, index) in kaoshiList"
                :key="index"
                :label="item.typeName"
                :value="item.typeId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="答题时间" prop="answerTime">
            <el-input
              style="width: 400px"
              placeholder="请输入"
              v-model="ruleForm.answerTime"
            >
              <template slot="append">分钟</template>
            </el-input>
          </el-form-item>
        </div>
      </div>
      <div class="quill" style="margin-top: 50px">
        <el-form-item label="考试说明：" prop="examExplain">
          <el-upload
            class="avatar-uploader"
            :action="serverUrl"
            name="file"
            :headers="header"
            :show-file-list="false"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :before-upload="beforeUpload"
          >
          </el-upload>
          <quill-editor
            ref="myQuillEditor"
            :options="editorOption"
            v-model="ruleForm.examExplain"
          ></quill-editor>
        </el-form-item>
      </div>
      <div class="info">
        <div class="title">
          <div>
            <p>
              考试科目
              <el-button type="primary" size="small" @click="addShij"
                >添加</el-button
              >
            </p>
          </div>
        </div>
        <div
          class="shijuanxinxi"
          v-for="(ite, index) in ruleForm.paperInformation"
          :key="index"
        >
          <!-- <div class="infoShijuan"> -->
            <!-- <el-form-item label="选择试卷：">
              <el-select v-model="ite.paperId" placeholder="请选择试卷">
                <el-option
                  v-for="(item, ind) in studentStatusList"
                  :key="ind"
                  :label="item.paperName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item> -->
          <!-- </div> -->
          <div class="infoShijuan">
            <el-form-item label="考试日期：">
              <el-date-picker
                v-model="ite.subjectTime"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="changeDates(index)"
              >
              </el-date-picker>
            </el-form-item>
          </div>
          <div class="infoShijuan">
            <el-form-item label="选择科目：">
              <el-select
                v-model="ite.subjectName"
                @change="changeSub(index)"
                placeholder="请选择科目"
              >
                <el-option
                  v-for="(item, index) in subjects"
                  :key="index"
                  :label="item.typeName"
                  :value="item.typeName"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
      </div>
      <div class="table">
        <div class="studentInfo">
          <div class="infoTitle">
            <div>
              <p>学生信息</p>
            </div>
          </div>
          <div class="setBtns">
            <el-button type="primary" class="newAdd" @click="addCollege">
              <i class="el-icon-plus"></i>
              新增
            </el-button>
          </div>
        </div>
        <el-dialog
          title="学生信息"
          :visible.sync="editFlag"
          width="800px"
        >
          <el-table
            :row-key="(row) => row.id"
            ref="multipleTable"
            :data="studentData"
            tooltip-effect="dark"
            style="width: 100%"
            :header-cell-style="{ textAlign: 'center', background: '#f3f8fc' }"
            :cell-style="{ textAlign: 'center' }"
            @selection-change="selectionChangeStudent"
          >
            <el-table-column
              type="selection"
              :reserve-selection="true"
              width="55"
            >
            </el-table-column>
            <el-table-column label="序号" type="index" width="50">
            </el-table-column>
            <el-table-column label="姓名" prop="studentName"> </el-table-column>
            <el-table-column label="证件号" prop="idCardNo"> </el-table-column>
            <el-table-column prop="gender" label="性别">
              <template slot-scope="scope">
                <div v-if="scope.row.gender == 0">男</div>
                <div v-if="scope.row.gender == 1">女</div>
              </template>
            </el-table-column>
            <el-table-column prop="concact" label="联系电话"> </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
         <div class="btn">
            <el-button type="primary" class="infoNewAdd" @click="selectedStudent">
              确定
            </el-button>
            <el-button type="primary" class="infoNewAdd" @click="isSelectedStudent">
              取消
            </el-button>
         </div>
        </el-dialog>
        <div class="tableData" v-if="selectStudent.length>0">
          <el-table
            :row-key="(row) => row.id"
            :data="selectStudent"
            tooltip-effect="dark"
            style="width: 100%"
            :header-cell-style="{ textAlign: 'center', background: '#f3f8fc' }"
            :cell-style="{ textAlign: 'center' }"
          >
            <!-- <el-table-column
              type="selection"
              :reserve-selection="true"
              width="55"
            >
            </el-table-column> -->
            <el-table-column label="序号" type="index" width="50">
            </el-table-column>
            <el-table-column label="姓名" prop="studentName"> </el-table-column>
            <el-table-column label="证件号" prop="idCardNo"> </el-table-column>
            <el-table-column prop="gender" label="性别">
              <template slot-scope="scope">
                <div v-if="scope.row.gender == 0">男</div>
                <div v-if="scope.row.gender == 1">女</div>
              </template>
            </el-table-column>
            <el-table-column prop="concact" label="联系电话"> </el-table-column>
            <el-table-column prop="concact" label="操作">
              <template slot-scope="scope">
                <span class="removeStudent" @click="removeStudent(scope.row)">删除</span>
              </template>
            </el-table-column>

          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
      <div class="submit">
        <el-button type="primary" @click="submitForm('ruleForm')"
          >立即创建</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
        <el-button @click="goBack">返回</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
// addExaminationApi
import { getClassifyListApi } from "../../api/basics/classify.js";
import { getTextPagerListApi } from "../../api/onlinehomework/textPager.js";
import { studentApi } from "@/api/educational/student";
import {
  addExaminationApi,
  getRoomList,
  examinationDetatilApi,
  getExaminationListApi,
  editExaminationApi,
} from "@/api/testManagement/Examination.js";
import { getToken } from "../../utils/auth";
import { getGradeListApi } from "@/api/basics/teachingPlan.js";
const toolbarOptions = [
  ["image"], // 链接、图片、视频-----['link', 'image', 'video']
];
export default {
  name: "AddExaminationItem",
  data() {
    return {
      serverUrl: "http://121.36.5.159:8081/file/upload", //图片上传的服务器地址
      header: {
        Authorization: `Bearer ${getToken()}`,
      },
      quillUpdateImg: false,
      editorOption: {
        placeholder: "请在这里输入",
        theme: "snow", //主题 snow/bubble
        modules: {
          history: {
            delay: 1000,
            maxStack: 50,
            userOnly: false,
          },
          toolbar: {
            container: toolbarOptions,
            handlers: {
              image: function (value) {
                if (value) {
                  // 调用element的图片上传组件
                  console.log(document.querySelector(".avatar-uploader input"));
                  document.querySelector(".avatar-uploader input").click();
                } else {
                  this.quill.format("image", false);
                }
              },
            },
          },
        },
      },
      currentPage: 0, //页码
      pageNum: 1,
      pageSize: 10,
      total: 0,
      examTime1: "",
      examinationRoom: [], //考场
      ruleForm: {
        examPaper: "", // 考试名称
        examTime: "", // 考试时间
        examinationDate: "", //考试日期
        examType: "", // 考试类型
        answerTime: "", // 答题时间
        examExplain: "", //考试说明
        studentIds: [], //学生ID
        examStatus: 0,
        locName: "", //考点
        examinationRoomInformation: [
          {
            id: "", //考场ID
            roomName: "", //考场名称
            number: "", //容纳人数
            roomPlace: "",
          },
        ], //考场信息列表
        paperInformation: [
          {
            // paperId: "", //试卷ID
            subjectName: "", //考试科目
            subjectId: "", //考试科目
            subjectTime: "", //本科目考试起止时间
          },
        ],
        // passMark: "", //及格分数
        // fullMark: "", //满分分数
        // examineeKonw: "", //考试须知
        // optionSort: "", //选项排序
        // topicSort: "", //试题排序
        // userPostName: "", //报考岗位
        // userRoomNo: "", //考场号
        // examStatus: 0, //开考状态
      },
      rules: {
        examPaper: [
          { required: true, message: "请输入考试名称", trigger: "blur" },
        ],
        answerTime: [
          { required: true, message: "请输入答题时间", trigger: "blur" },
        ],
        userPostName: [
          { required: true, message: "请输入岗位", trigger: "blur" },
        ],
        locName: [{ required: true, message: "请输入考点", trigger: "blur" }],
        examExplain: [
          { required: true, message: "请填写考试说明", trigger: "blur" },
        ],
        examTime: [
          { required: true, message: "请选择考试时间", trigger: "change" },
        ],
        subjectTime: [
          { required: true, message: "请选择考试日期", trigger: "change" },
        ],
        examType: [
          { required: true, message: "请选择考试类型", trigger: "change" },
        ],
        // paperId: [{ required: true, message: "请选择试卷", trigger: "change" }],
        userRoomNo: [
          { required: true, message: "请选择考场", trigger: "change" },
        ],
        subjectName: [
          { required: true, message: "请选择科目", trigger: "change" },
        ],
      },
      studentData: [], // 表格数据
      studentStatusList: "", //试卷列表
      kaoshiList: [], //试卷列表
      roomList: [], //考场列表
      subjects: [], //学科列表
      studentList: [],
      editFlag:false,
      selectStudent:[],
      arr:[]
    };
  },
  created() {
    if (this.$route.query.id) {
      this.getDetail();
    }
  },
  mounted() {
    this.getPagerList();
    this.getKecheng();
    this.getSudent();
    // setTimeout(() => {

    // }, 2000);
    // this.addCollege()
  },
  methods: {
    
    changeSub(index) {
      this.subjects.forEach((item) => {
        if (
          item.typeName == this.ruleForm.paperInformation[index].subjectName
        ) {
          this.ruleForm.paperInformation[index].subjectId = item.typeId;
        }
      });
    },
    uploadSuccess(res, file) {
      console.log(res, "res");
      console.log(file, "file");
      // 获取富文本组件实例
      let quill = this.$refs.myQuillEditor.quill;
      // 如果上传成功
      if (res) {
        // 获取光标所在位置
        let length = quill.getSelection().index;
        // 插入图片，res为服务器返回的图片链接地址
        quill.insertEmbed(length, "image", res.data.url);
        // 调整光标到最后
        quill.setSelection(length + 1);
      } else {
        // 提示信息，需引入Message
        this.$message.error("图片插入失败！");
      }
      this.quillUpdateImg = false;
    },

    // 富文本图片上传失败
    uploadError(ee) {
      console.log(ee);
      // loading动画消失
      this.quillUpdateImg = false;
      this.$message.error("图片插入失败");
    },

    // 富文本图片上传前
    beforeUpload(file) {
      console.log(file);
      // 显示loading动画
      this.quillUpdateImg = true;
    },
    changeDates(index) {
      console.log(this.ruleForm.paperInformation[index].subjectTime);
    },
    async getSudent() {
      const res = await studentApi({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      });
      this.total = res.total;
      this.studentData = res.rows;
    },
    // 分页事件
    handleSizeChange(e) {
      this.pageSize = e;
      this.getSudent();
    },
    handleCurrentChange(e) {
      this.pageNum = e;
      this.getSudent();
    },
    changeRoom(e) {
      this.ruleForm.examinationRoomInformation = [];
      this.roomList.forEach((item) => {
        e.forEach((items) => {
          if (items == item.id) {
            this.ruleForm.examinationRoomInformation.push({
              id: item.id, //考场ID
              roomName: item.roomName, //考场名称
              number: item.number, //容纳人数
              roomPlace: item.roomPlace,
            });
          }
        });
      });
    },
    // 重置
    resetForm() {
      this.examinationRoom = [];
      this.ruleForm = {
        examPaper: "", // 考试名称
        examTime: "", // 考试时间
        examType: "", // 考试类型
        answerTime: "", // 答题时间
        examExplain: "", //考试说明
        studentIds: [], //学生ID
        userPostName: "", //报考岗位
        locName: "", //考点
        userRoomNo: "", //考场号
        examStatus: 0, //开考状态
        paperInformation: [
          {
            // paperId: "", //试卷ID
            subjectName: "", //考试科目
            subjectTime: "", //本科目考试时间
          },
        ],
      };
    },
    // 添加试卷
    addShij() {
      this.ruleForm.paperInformation.push({
        // paperId: "", //试卷ID
        subjectName: "", //考试科目
        subjectTime: "", //本科目考试时间
      });
    },
    // 获取通过点击修改传递的id返回的数据
    async getDetail() {
      const list = await examinationDetatilApi({
        examId: Number(this.$route.query.id),
      });
      this.ruleForm = {
        examPaper: list.data.examPaper, // 考试名称
        examTime: list.data.examTime, // 考试时间
        examinationDate: list.data.examinationDate, //考试日期
        examType: list.data.examType, // 考试类型
        answerTime: list.data.answerTime, // 答题时间
        examExplain: list.data.examExplain, //考试说明
        studentIds: [], //学生ID
        examStatus: 0,
        locName: list.data.locName, //考点
        examinationRoomInformation: JSON.parse(
          list.data.examinationRoomInformation
        ), //考场信息列表
        paperInformation: JSON.parse(list.data.paperInformation),
      };

      JSON.parse(list.data.examinationRoomInformation).forEach((item) => {
        this.examinationRoom.push(item.id);
      });
      this.ruleForm.paperInformation.forEach((item) => {
        return (item.subjectTime = item.subjectTime.split("至"));
      });
      const kaoshiList = await getClassifyListApi({ parentId: 147 });
      kaoshiList.rows.forEach((item) => {
        if (item.typeId == this.ruleForm.examType) {
          this.ruleForm.examType = item.typeName;
        }
      });
      this.examTime1 = list.data.examTime.split("至");
      const datas = await getGradeListApi({ parentId: 130 });
      this.ruleForm.paperInformation.forEach((item) => {
        datas.rows.forEach((ite) => {
          if (item.subjectName == ite.typeId) {
            item.subjectName = ite.typeName;
          }
        });
      });
      this.studentList = list.data.studentList;
      this.selectStudent = list.data.studentList;
      // this.studentData.forEach((key) => {
      //   this.studentList.forEach((row) => {
      //     if (row.id == key.id) {
      //       this.$refs.multipleTable.toggleRowSelection(row, true);
      //     }
      //   });
      // });
      this.getSudent();
    },
    // 获取学科
    async getKecheng() {
      const datas = await getGradeListApi({ parentId: 130 });
      this.subjects = datas.rows;
    },
    // // 改变日期
    change1() {
      this.ruleForm.examinationDate = this.formatDate1(
        this.ruleForm.examinationDate
      );
    },
    // 时间转换方法
    formatDate1(d) {
      var date = new Date(d);
      var YY = date.getFullYear() + "-";
      var MM =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      return YY + MM + DD;
    },
    // 时间转换方法
    formatDate(d) {
      var date = new Date(d);
      // var YY = date.getFullYear() + "-";
      // var MM =
      //   (date.getMonth() + 1 < 10
      //     ? "0" + (date.getMonth() + 1)
      //     : date.getMonth() + 1) + "-";
      // var DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hh =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var mm =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var ss =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return hh + mm + ss;
    },
    // 时间转换方法
    formatDate3(d) {
      var date = new Date(d);
      var YY = date.getFullYear() + "-";
      var MM =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hh =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var mm =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var ss =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return YY + MM + DD + " " + hh + mm + ss;
    },
    // 选择考试时间
    change() {
      let times = [];
      this.examTime1.map((item) => {
        times.push(item);
      });
      this.ruleForm.examTime = times[0] + "至" + times[1];
    },
    goBack() {
      this.$router.push("/testManagement/examinationList");
    },
    // 立即创建
    submitForm() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          // this.ruleForm.studentIds
          console.log(this.selectStudent);
          let arr = []
          this.selectStudent.forEach(item=>{
            arr.push(item.id)
          })
          console.log(arr);
          this.ruleForm.studentIds = arr.join(',')

          // this.ruleForm.studentIds = this.ruleForm.studentIds.join(",")
          console.log(this.ruleForm.studentIds);
          // if (this.ruleForm.studentIds.length == 0) {
          //   this.$message({
          //     type: "error",
          //     message: "请选择学生",
          //   });
          //   return false;
          // }
          // this.ruleForm.paperInformation.subjectTime =
          //   this.ruleForm.paperInformation[index].subjectTime
          //     .map((item) => {
          //       return (item = this.formatDate3(item));
          //     })
          //

          // let a = this.ruleForm.paperInformation.every((item) => {
          //   return item.paperId == "";
          // });
          let b = this.ruleForm.paperInformation.every((item) => {
            return item.subjectTime == "";
          });
          let c = this.ruleForm.paperInformation.every((item) => {
            return item.subjectName == "";
          });
          let d = this.ruleForm.examinationRoomInformation.every((item) => {
            return item.id == "";
          });
          // if (a) {
          //   this.$message({
          //     type: "error",
          //     message: "请选择试卷",
          //   });
          //   return false;
          // }
          if (b) {
            this.$message({
              type: "error",
              message: "请选择考试时间",
            });
            return false;
          }
          if (c) {
            this.$message({
              type: "error",
              message: "请选择科目",
            });
            return false;
          }
          if (d) {
            this.$message({
              type: "error",
              message: "请选择考场",
            });
            return false;
          }
          this.ruleForm.paperInformation.forEach((item) => {
            item.subjectTime = item.subjectTime
              .map((ite) => {
                return (ite = this.formatDate3(ite));
              })
              .join("至");
          });

          let obj = this.ruleForm;
          if (this.$route.query.id) {
            obj.examId = this.$route.query.id;
            const data = await editExaminationApi(obj);
            if (data.code == 200) {
              this.$message({
                type: "success",
                message: "操作成功",
              });
              this.$router.push("/testManagement/examinationList");
              this.ruleForm = {
                examPaper: "", // 考试名称
                examTime: "", // 考试时间
                examType: "", // 考试类型
                answerTime: "", // 答题时间
                examExplain: "", //考试说明
                studentIds: [], //学生ID
                userPostName: "", //报考岗位
                locName: "", //考点
                userRoomNo: "", //考场号
                examStatus: 0, //开考状态
                paperInformation: [
                  {
                    // paperId: "", //试卷ID
                    subjectName: "", //考试科目
                    subjectTime: "", //本科目考试时间
                  },
                ],
              };
              this.examTime1 = "";
            }
          } else {
            const data = await addExaminationApi(obj);
            if (data.code == 200) {
              this.$message({
                type: "success",
                message: "操作成功",
              });
              this.$router.push("/testManagement/examinationList");
              this.ruleForm = {
                examPaper: "", // 考试名称
                examTime: "", // 考试时间
                examType: "", // 考试类型
                answerTime: "", // 答题时间
                examExplain: "", //考试说明
                studentIds: [], //学生ID
                userPostName: "", //报考岗位
                locName: "", //考点
                userRoomNo: "", //考场号
                examStatus: 0, //开考状态
                paperInformation: [
                  {
                    // paperId: "", //试卷ID
                    subjectName: "", //考试科目
                    subjectTime: "", //本科目考试时间
                  },
                ],
              };
              this.examTime1 = "";
            }
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 获取试卷列表
    async getPagerList() {
      const data2 = await getClassifyListApi({ parentId: 147 });
      const data = await getTextPagerListApi();
      const data3 = await getRoomList();
      const list = await getExaminationListApi({ pageSize: 10, pageNum: 1 });
      let date = new Date();
      let lists = [];
      list.rows.forEach((item) => {
        // console.log(Date.parse(item.examTime.split("至")[1]));
        if (Date.parse(date) < Date.parse(item.examTime.split("至")[1])) {
          // console.log("考试时间没过", item);
          lists.push(item.userRoomNo);
        }
      });
      this.roomList = data3.rows.filter(
        (v) => lists.findIndex((el) => el == v.id) === -1
      );
      this.kaoshiList = data2.rows;
      this.studentStatusList = data.rows;
    },
    // 新增学生
    addCollege() {
      // let aa = "kaoshi";
      // this.$router.push("/educational/addstudent?route=" + aa);
      this.editFlag = true
      console.log(this.selectStudent);
      this.studentData.forEach(it=>{
        this.selectStudent.forEach(item=>{
          if(item.id == it.id) {
            console.log(it);
            this.$nextTick(()=>{
              this.$refs.multipleTable.toggleRowSelection(it,true)
            })
          }
        })
      })
    },
    removeStudent(row) {
      this.selectStudent.forEach((item,index)=>{
        if(item.id == row.id) {
          this.selectStudent.splice(index,1)
        }
      })
      this.studentData.forEach((item)=>{
        if(item.id == row.id) {
          console.log(item);
          this.$refs.multipleTable.toggleRowSelection(item,false)
        }
      })
    },
    selectedStudent() {
      this.editFlag = false
      this.selectStudent = this.arr
      // this.selectStudent.push(...this.arr)
      console.log(this.selectStudent,'000000');
    },
    selectionChangeStudent(row) {
      this.arr = row
      let ids = [];
      row.forEach((item) => {
        ids.push(item.id);
      });
      // this.selectStudent.forEach(item=>{
      //   ids.push(item.id)
      // })
      // this.ruleForm.studentIds = ids.join(",");
      // console.log(this.ruleForm.studentIds);
      
     
    },
    isSelectedStudent() {
      this.editFlag = false
    },
    // 表格选中事件
    selectionChange(val) {
      let ids = [];
      val.forEach((item) => {
        ids.push(item.id);
      });
      this.ruleForm.studentIds = ids.join(",");
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-picker-panel .el-date-picker .el-popper {
  position: absolute;
  top: 780px;
  left: 600px;
}
.AddExaminationItem {
  width: 100%;
  height: 100%;
  min-width: 100vh;
  padding: 0 20px;
  .title {
    width: 100%;
    height: 60px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 600;
    background-color: #fff;
    div {
      padding: 10px 20px;
      height: 40px;
      border-left: 3px solid blue;
    }
  }
  .el-form {
    background-color: #fff;
    padding: 20px 20px;
    .formBox {
      display: flex;
      .formTop {
        width: 450px;
        height: 200px;
        .infoDati {
          display: flex;
          p {
            width: 70px;
          }
        }
      }
      .formBottom {
        flex: 1;
      }
    }
    .quill {
      // display: flex;
      .quill-editor {
        width: 100%;
      }
    }
    .info {
      width: 100%;
      .shijuanxinxi {
        width: 100%;
        height: 100%;
        display: flex;
        border: 1px solid #ccc;
        margin-bottom: 15px;
        align-items: center;
        // flex-wrap: wrap;
        .infoShijuan {
          width: 600px;
          height: 72px;
          display: flex;
          align-items: center;
          .el-form-item{
            margin-bottom: 0 !important;
          }
          .selectSort span {
            margin-right: 10px;
          }
        }
        .solt {
          flex: 1;
          span {
            margin-right: 10px;
          }
        }
      }
    }
    .table {
      width: 100%;
      .el-dialog__body{
        text-align: center;
      }
      .btn{
        width: 100%;
        text-align: center;
        .infoNewAdd{
          margin-top: 20px;
        }
      }
      .studentInfo {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .infoTitle {
          width: 200px;
          height: 60px;
          padding: 10px 20px;
          font-size: 16px;
          font-weight: 600;
          background-color: #fff;
          div {
            padding: 10px 20px;
            height: 40px;
            border-left: 3px solid blue;
          }
        }
        .setBtns {
          width: 600px;
          display: flex;
          justify-content: right;
          button {
            border: none;
          }
          .newAdd {
            background-color: rgb(86, 164, 212);
          }
          .moreDelete {
            background-color: rgb(241, 129, 143);
          }
          .moreRelease {
            text-align: center;
            background-color: rgb(127, 162, 216);
            .shareImg {
              width: 15px;
              height: 15px;
              margin-top: -3px;
              background: #fff;
            }
            ::v-deep .el-icon-s-promotion {
              color: white;
            }
          }
          .importBtn {
            background-color: #66c8e3;
          }
          .exportBtn {
            background-color: #fabd90;
          }
        }
      }
    }
    .submit {
      text-align: center;
      margin-top: 10px;
    }
  }
  .removeStudent {
    cursor:pointer;
  }
}
</style>
